<script setup>
import {reactive} from "vue";
import axios from "axios";
import uu from "@/util/uu";
import {ElMessage} from "element-plus";

//表格数据
let info = reactive({
  list:[],
  pageNum:1,
  pageSize:3,
  pages:0,
  total:0,
// 表格内数据
  sel:{

  },
//   开启对话框
  dialogVisible:false,
//   操作是否成功
  success :false,
//   是否在添加
  isAdd:false,
})
// 获取数据
const queryAll = () => {
  console.log("开始查询数据")
  console.log("传递的参数为"+JSON.stringify(info.sel))
  // http://localhost:8080
  uu.post("/BusInsurancePolicyController/pagingList",info.sel).then(result =>{
    info.list = result.data.list;
    info.sel.pageNum = result.data.pageNum;
    info.sel.pageSize = result.data.pageSize;
    info.total = result.data.total;
    console.log("接收到的数据为"+JSON.stringify(result.data));
    // console.log(result);
  })
}
// 查询
queryAll()

// 改变页数
const pagesChange = (value) => {
  // alert(value)
 //  console.log(value)
 info.pages = value;
  queryAll();
}
// 上下页
const pageNumChange = (value) => {
  // alert(value)
  console.log(value)
  info.sel.pageNum = value;
  queryAll();
}

// 删除
const handleDelete = (id) => {
  // alert(id)
  uu.delete("/TestController/del/"+id).then(result =>{
    // alert(result.message)
    if (result.ok){
      info.success = true; // 显示成功提示
      ElMessage({
        message:result.message,
        type:"success",
      })
      queryAll()
    }else {
      ElMessage.error(result.message)// 显示失败提示
    }
    // alert(info.success)
  })
}

// 开启对话框
const dialogBox = (isAdd,id) => {
  info.dialogVisible = true;
  if (isAdd === false){
    // 根据id获取用户数据
    uu.get("/TestController/get/"+id).then(result =>{
      info.sel = result;
    })
  }
  // 将值传递到视图，然后视图判断要显示那些文字， 以及提交时调用那个方法。
  info.isAdd = isAdd;
}

// 添加
const save = () => {
  uu.post("/TestController/save",info.sel).then(result =>{
    if (result.ok){
      info.dialogVisible= false; // 关闭添加页面
      //   需要补上 增加成功的提示
      ElMessage({
        message:result.message,
        type:"success",
      })
    }else {
      ElMessage.error(result.message)
    }
    info.sel = {} // 清楚已有缓存，因为其他区域也在使用该对象数据。
  })
}

//  修改
const handleEdit = () => {
  uu.put("/TestController/update/",info.sel).then(result =>{
    // info.success = result.ok;
    if (result.ok){
      ElMessage({
        message:result.message,
        type:"success"
      })
      //   清除缓存
      info.sel = {}
      //   刷新页面
      queryAll()
      //   关闭对话框
      info.dialogVisible = false;
    }else {
      ElMessage.error(result.message)
    }
  })

}
// 关闭对话框并清除数据
const handleClose = () => {
  info.sel={}; // 清除数据
  info.dialogVisible=false // 关闭对话框
}

</script>

<template>
  <!--  ------------------------- 保单组件 ------------------------------------------ -->
  <div style="width: 100%;height: 100%">
    <!-- 便捷查询区域-->
    <el-form :inline="true" :model="info.sel" class="demo-form-inline" style="width: 100%">
      <el-form-item label="保单号" >
        <el-input v-model="info.sel.policyNumber"  />
      </el-form-item>
      <el-form-item label="被保人姓名">
        <el-input v-model="info.sel.insuredName"  />
      </el-form-item>
      <el-form-item label="保单状态">
        <el-select v-model="info.sel.policyStatus" placeholder="保单状态">
          <el-option label="保期内" value="1" />
          <el-option label="保期已过期" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="缴费日期">
        <el-date-picker
            v-model="info.sel.paymentDate"
            type="date"
            placeholder="Pick a day"
            :size="size"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryAll()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="info.list" border style="width: 100%">
      <el-table-column label="保单号" prop="policyNumber" fixed width="120" />
      <el-table-column label="投保人姓名" prop="insuredName" width="120" />
      <el-table-column label="投保人身份证号" prop="insuredId" width="120" />
      <el-table-column label="农户代码" prop="farmCode" width="120" />
      <el-table-column label="地址" prop="address" width="120" />
      <el-table-column label="联系电话" prop="contactNumber" width="120" />
      <el-table-column label="农作物种类" prop="cropType" width="120" />
      <el-table-column label="种植面积" prop="plantingArea" width="120" />
      <el-table-column label="保险金额" prop="insuranceAmount" width="120" />
      <el-table-column label="保险费率" prop="insuranceRate" width="120" />
      <el-table-column label="缴费金额" prop="paymentAmount" width="120" />
      <el-table-column label="缴费日期" prop="paymentDate" width="120" />
      <el-table-column label="保险起期" prop="policyStartDate" width="120" />
      <el-table-column label="保险止期" prop="policyEndDate" width="120" />
      <el-table-column label="投保险种" prop="insuranceType" width="120" />
      <el-table-column label="承保公司" prop="insuranceCompany" width="120" />
      <el-table-column label="保单状态" prop="policyStatus" width="120">
        <template #default="scope">
          <el-tag class="ml-2" type="success" v-if="scope.row.policyStatus === 1">审阅完成</el-tag>
          <el-tag class="ml-2" type="warning" v-else-if="scope.row.policyStatus === 0">审阅失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template #default="scope">
          <!-- 点击开启对话框 -->
          <el-popconfirm @confirm="handleDelete(scope.row.id)" title="你确定要删除吗？">
            <template #reference>
              <el-button size="small" type="danger" :plain="true">Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="width: 100%">
      <br>
      <el-pagination
          v-model:current-page="info.sel.pageNum"
          v-model:page-size="info.sel.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :small="false"
          :disabled="disabled"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="info.total"
          @size-change="pagesChange($event)"
          @current-change="pagesChange($event)"
      />
    </div>
  </div>
</template>
<style scoped>

</style>